<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script rel="script" src="js/vue-2.4.0.js"></script>

    <link rel="stylesheet" href="css/animate.css">

    <style>
        li{
            border: 1px dashed #999;
            margin: 5px;
            line-height: 35px;
            font-size: 14px;
            padding-left: 5px;
            width: 100%;
        }

        li:hover{
            background-color: hotpink;
            transition: all 0.5s ease;
        }
        .v-enter,.v-leave-to{
            opacity: 0;
            transform: translateY(80px);
        }

        .v-enter-active,.v-leave-active{
            transition: all 0.6s ease;
        }

        /*v-move 和 v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */

        .v-move{
            transition: all 0.6s ease;
        }
        .v-leave-active{
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <label>
                ID:
                <input type="text" v-model="id">
            </label>
            <label>
                Name:
                <input type="text" v-model="name">
            </label>

            <input type="button" value="添加" @click="add">
        </div>



       <ul>
           <!--在实现列表过渡时，如果需要过渡的元素是通过v-for渲染出来的，不能使用
           transition 包裹，需要使用 transition-group -->

           <!--若需要为 v-for 循环创建的元素设置动画，必须为每一个元素设置 :key 属性-->
           <transition-group>
               <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
                   {{ item.id }} --- {{ item.name }}
               </li>
           </transition-group>
       </ul>
       
       <div>{{msg}}</div>
       
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el : '#app',
            data : {
                id:'',
                name :'',
                list : [
                    {id:1,name:'赵高'},
                    {id:2,name:'秦桧'},
                    {id:3,name:'严嵩'},
                    {id:4,name:'魏忠贤'},
                ],
                msg:'旧数据'
            },
            methods : {
                add(){
                    this.list.push({ id :this.id,name : this.name});
                    this.id = this.name = '';
                },
                del(i){
                    this.list.splice(i,1);
                },
            }
        });
        // 修改数据
		vm.msg = 'Hello'
		// DOM 还没有更新
		Vue.nextTick(function () {
		  // DOM 更新了
		})

        
        
        /*
         
         * Vue.config.silent= true 取消vue的所有日志和警告
         * Vue.config.devtools= true 允许代码检查
         * Vue.config.errorHandler= function(err,vm,info){} 捕获错误
         * Vue.confog.warnHandler= function(msg,vm,trace){} 警告
         * Vue.nextTick(function(){}) 更新数据
         * Vue.set() 设置数据并响应式更新
         * Vue.delete() 删除数据并响应式更新
         * Vue.directive() 注册或获取全局指令
         * Vue.filter() 注册或获取全局过滤器
         * Vue.component() 注册或获取全局指令
         * Vue.use() 引入插件
         * Vue.mixin() 全局注册一个混入
         * Vue.compile() 将模板字符串编译成render函数，只在完整板时用
         * Vue.version() 获取当前vue的版本(字符串形式的)  
         * computed/methods/watch都不要使用箭头函数，会改变this的指向
         * vm.mount() 当实例化时不存在el选项，需手动开启编译
         * beforCreate  实例初使化后，数据观测和事件配置之前被调用。
         * created  实例创建完成后，实例已完成数据观测，属性和方法，事件的回调，但$el属性不能用。
         * beforeMount 实例挂载之前调用，相关render渲染
         * mounted  实例挂载后调用，$el属性可用。
         * beforUpdate  数据更新时调用
         * updated  数据更新后调用
         * activated  被keep-alive缓存的组件激活时调用
         * deactivated  被keep-alive缓存的组件停用时调用
         * beforDestroy 实例销毁前调用，实例现在仍可用。
         * destroyed 实例销毁后调用
         * errorCaptured
         * directives vue实例可用指令的哈希表
         * filters  vue实例可用过滤器的哈希表
         * components  vue实例可用组件的哈希表
         * parent   了问父
         * children 父问子
         * mixins 混入  在组件自身调用前调用这个混入
         * extends 允许声明扩展另一个组件
         * priovide/inject 两个一起用，表示允许一个祖先组件向所有后代子孙后代注入一个依赖
         * 
         * display:block;clear:both;content:'';height:0;visibility:hidden;visibility:hidden;
         * preventdefault
         * delimiters
         * model
         * inheriAttrs
         * comments
         * vm.$data  vue实例观察的数据对像
         * vm.$props 当前组件接收到的props对象
         * vm.$el  当前实例的根元素
         * vm.$options 当前实例的初使化选项，需要在选项中包含自定义属性时会有用
         * vm.$parent  当前实例的父实例
         * vm.$root  当前组件的根vue实例，如果当前组件没有父实例，此实例将是自己
         * vm.$children  当前实例的直接子组件
         * vm.$slots 访问插槽分发的内容
         * vm.$scopedSlots 访问作用域插槽
         * vm.$refs  一个对象，持有注册过ref特性的所有DOM元素和组件实例
         * vm.$isServer 当前vue实例是否运行于服务器
         * vm.$attrs
         * vm.$listeners 事件监听器
         * vm.$watch 观察实例上一个表达式或函数计算结果的变化
         * 
         * var unwatch = vm.$watch('a', cb)
			// 之后取消观察
			unwatch()
			
			vm.$set 全局Vue.set的别名
			vm.$delete 全局Vue.delete的别名
			vm.$on 监听当前实例上的自定义事件 ，事件可由vm.$emit触发
			vm.$once 监听一个自定义事件，但只触发一次，触发后监听器就会被移除
			vm.$off  移除自定义事件监听器
			vm.$emit 触发当前实例上的事件，附加参数都会传给监听器回调
			vm.$mount 当实例未挂载时，没有el选项，使用这个可手动挂载
			vm.$foceUpdate() 迫使vue实例重新渲染，但它的子组件不会重新渲染
			vm.$nextTick 更新
			vm.$destroy 销毁实例，清理与其它实例的连接，解绑所有指令及事件监听
			
         *  v-text
         *  v-html
         *  v-show
         *  v-if
         *  v-else
         *  v-else-if
         *  v-for
         *  v-on  简写 @
         *  v-bind  简写：
         *  v-model  用于input,textarea,select,components
         *  v-slot 插槽  用于template,组件
         *  v-pre 不需要编译或者说跳过这段编译
         *  v-cloak  与css的[v-cloak]{display:none;}一起用，html中的{{}}没编译的内容不会显示，编译完了才显示
         *  v-once 用于单个元素或组件
         * 
         *  #key  配合v-for一起使用，触发过渡
         *  #ref
         *  #is  用于动态组件且基于DOM模板的限制来工作
         * 
         * 内置组件：
         * component
         * transition 动画，不会渲染dom元素，只是动画
         * transition-group  多个元素/组件的过渡效果，渲染一个真实的dom元素，默认渲染span,每个子节点必须有独立的key动画才能正常工作
         * keep-alive 缓存不活动的组件，用于保留组件状态避免重新渲染
         * slot 插槽
         * 
         * 
         * 
         * 
         * 
         * 
         * 
         * 
         * 
         * */
     </script>
</body>
</html>